<template>
    <view class="nav gap-x-4 gap-y-4">
        <view :class="['navItem']" v-for="(item, index) in nav" :key="index"
            @click="routerPush(item.path, item.type, item.title)">
            <image class="img" :src="item.icon" mode="" />
            <text class="title">{{ $t(`index.nav.${item.title}`) }}</text>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import { useStockStore } from '@/stores'
const nav = ref([
    {
        icon: '../../static/icon/guzhi.png',
        title: "guzhi",
        type: 1,
        path: '/pages/market/zhishu'
    },
    {
        icon: '../../static/icon/shengou.png',
        title: "shengou",
        type: 0,
        path: '/pages/market/market'
    },
    {
        icon: '../../static/icon/zhixuan.png',
        title: "zixuan",
        type: 0,
        path: '/pages/market/market'
    },
    {
        icon: '../../static/icon/gupiaohongli.png',
        title: "hongli",
        type: 1,
        path: '/pages/hongli/hongli'
    },
    {
        icon: '../../static/icon/zhihui.png',
        title: "zhihui",
        type: 0,
        path: '/pages/documentary/documentary'
    },
    {
        icon: '../../static/icon/huwei.png',
        title: "huwei",
        type: 1,
        path: '/pages/huwei/huwei'
    },
    {
        icon: '../../static/icon/jiaoyi.png',
        title: "jiaoyi",
        type: 1,
        path: '/pages/private/private'
    },
    {
        icon: '../../static/icon/kefu.png',
        title: "kefu",
        type: 0,
        path: ''
    },
])
// 仓库
const store = useStockStore()
const routerPush = (path, type, title) => {
    if (type == 0) {// 0 底部导航栏
        // 申购
        uni.switchTab({
            url: path,
            success: () => {
                title == 'shengou' && store.setCurrentIndex(2)
                title == 'zixuan' && store.setCurrentIndex(3)
            }
        })
    } else {
        title != 'kefu' && uni.navigateTo({ url: path })
        // title == 'kefu' && uni.navigateTo({ url: path }) // 客服
    }
}


</script>

<style lang="scss">
.nav {
    background: $uni-bg-color-light-dark;


    width: 670rpx;
    height: 319rpx;
    margin-top: 40rpx;
    border-radius: 28rpx;
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    padding: 41rpx 55rpx 70rpx;
    box-sizing: border-box;


    .navItem {
        position: relative;
    }

    .img {
        width: 56rpx;
        height: 56rpx;
        position: absolute;
        top: 0%;
        left: 50%;
        transform: translateX(-50%);
    }

    .title {
        color: #B9C0D4;
        text-align: center;
        line-height: 56rpx;
        white-space: nowrap;
        font-size: 28rpx;
        position: absolute;
        top: 46rpx;
        left: 50%;
        transform: translateX(-50%);
    }
}

.gap-x-4 {
    -webkit-column-gap: 2rem;
    -moz-column-gap: 2rem;
    grid-column-gap: 2rem;
    column-gap: 2rem;
}

.gap-y-4 {
    -webkit-row-gap: 1.6rem;
    -moz-row-gap: 1.6rem;
    grid-row-gap: 1.6rem;
    row-gap: 1.6rem;

}
</style>